<template>
	<div class="TrafficServices">
		<el-card shadow="hover" class="box-card" :body-style="{ padding: '20px' }">
			<div slot="header">
				<span>流量数据分析</span>
			</div>
			<el-form ref="form" :model="form" label-width="80px">
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="导入文件">
							<div class="dialog-footer">
								<el-input v-model="fileName" placeholder="" size="normal" disabled></el-input>
							</div>
							<span style="color: red">{{ error }}</span>
							<input type="file" id="files" @change="changeFile" />
						</el-form-item>
					</el-col>
					<el-col :span="12" :offset="0">
						<el-button type="primary" @click="uploadFile">选择文件</el-button>
						<el-button type="primary" @click="submitUpload" :loading="loading">{{ text }}</el-button>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<el-card shadow="hover" class="box-card" :body-style="{ padding: '20px' }">
			<div slot="header">
				<span>历史分析</span>
			</div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="filename" label="文件名称"></el-table-column>
				<el-table-column prop="time" label="上传时间"></el-table-column>
				<el-table-column prop="status" label="分析状态"></el-table-column>
				<el-table-column prop="result" label="判断结果"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="views(scope.$index, scope.row)">查看详情</el-button>
						<!-- <el-button size="mini">删除</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<div class="div_pagination">
				<el-pagination layout="total, prev, pager, next" :total="total" :current-page.sync="formlist.index"
					:page-size.sync="formlist.height" @current-change="history" />
			</div>
		</el-card>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				form: {},
				total: 0,
				formlist: {
					index: 1,
					height: 10
				},
				error: '',
				text: '开始分析',
				tableData: [],
				fileList: [],
				fileName: '',
				loading: false,
				listName: ['pcap', 'cap', 'pcapng'],
				timer: null
			}
		},
		mounted() {
			this.history()
		},
		beforeDestroy() {
			this.timer && clearInterval(this.timer)
		},
		methods: {
			// 历史数据
			async history() {
				// let data2 = await this.$http.get('http://139.196.137.184:5003/history')
				// let data2 = await this.$http.get('http://127.0.0.1:5000/1/history')
				let parmas = this.formlist

				let data2 = await this.$api.getHistoryPage(parmas)
				this.total = data2.data.mount
				this.tableData = []
				if (data2.status === 200) {
					data2.data.data.forEach((item, i) => {
						let json = {
							filename: item[0],
							time: item[1],
							status: item[2],
							result: item[3],
							detail: item[4],
						}
						this.tableData.push(json)
					})
				}
			},
			Refresh(){
				this.formlist.index = 1
				this.history()
				this.timer && clearInterval(this.timer)
				this.timer = setInterval(() => {
					this.history()
				}, 3000)
				setTimeout(()=>{
					this.timer && clearInterval(this.timer)
				}, 1000 * 30)
			},
			// 查看详情数据·
			async views(index, row) {
				// this.$router.push({
				// 	path: '/TrafficSon',
				// 	query: {
				// 		id: row.detail,
				// 		// result: data.data.result
				// 	},
				// })
				const {
					href
				} = this.$router.resolve({
					path: '/TrafficSon',
					query: {
						id: row.detail,
						// result: data.data.result
					},
				});
				window.open(href, '_blank');
			},
			async submitUpload() {
				this.loading = true
				this.text = '正在上传'
				let file = document.getElementById('files').files[0]
				if (file) {
					let formData = new FormData()
					formData.append('filename', file)
					let {
						data: res
					} = await this.$api.postAnalysis(formData)
					this.loading = false
					this.text = '开始分析'
					if (res.code === 200) {
						this.$message.success('上传成功')
						this.Refresh()
					} else {
						this.$message.error('上传失败')
					}
				} else {
					this.text = '开始分析'
					this.loading = false
					this.$message.error('请选择文件')
				}
			},
			uploadFile() {
				var f = document.getElementById('files')
				f.click()
			},
			changeFile() {
				var f = document.getElementById('files')
				let arr = f.files[0].name.split('.')
				console.log(arr)
				if (this.listName.includes(arr[1])) {
					this.error = ''
					this.fileName = f.files[0].name
					console.log(this.fileName)
				} else {
					this.error = `只能上传${this.listName.toString()}格式文件`
					this.$message.error(this.error)
				}
			},
		},
	}
</script>
<style scoped>
	.div_pagination {
		display: flex;
		flex-direction: row-reverse;
		margin: 10px 0;
		font-size: 14px
	}

	.TrafficServices {
		width: 98%;
		height: 100%;
		padding: 10px 10px;
		background-color: #f2f4f6;
	}

	.box-card {
		margin: 20px;
	}

	.top {
		height: 20%;
		width: 100%;
		background-color: #ffffff;
		/* margin-top: 10px; */
		padding: 10px;
		box-sizing: border-box;
	}

	.bottom {
		height: 70%;
		width: 100%;
		background-color: #ffffff;
		margin-top: 20px;
		padding: 10px;
		box-sizing: border-box;
	}

	.bottom h2 {
		margin-top: 0;
	}
</style>
